<template>
    <div class="divmain">
        <div class="divmain-case">
            <div ref="contraTop" class="divmain-case-top">
                <div class="divmain-case-top-left">
                  <div style="font-size: 14px;color: #333333;">名称</div>
                  <el-input style="width:200px;margin-left:8px;margin-right:12px" v-model="inputValue" placeholder="请输入名称"></el-input>
                  <el-button type="primary" @click="searchClick" :icon="Search" style="width:72px">查询</el-button>
                </div>
            </div>
            <div class="line"></div>
            <div class="content-box">
                <div class="button-case">
                    <div @click="addData" class="button-case-box">
                        <img
                        src="../../../assets/images/add_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>新增</div>
                    </div>
                    <div @click="deleteClick" class="button-case-box">
                        <img
                        src="../../../assets/images/del_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>删除</div>
                    </div>
                    <div @click="saveClick" class="button-case-box">
                        <img
                        src="../../../assets/images/save_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>保存</div>
                    </div>
          
                </div>
                <!-- 表格 -->
                <xinpuTableGrid
                ref="xinpuGrid"
                :loading="loading"
                :tableHeight="tableHeight"
                :tableWidth="tableWidth"
                :columnsData="columns"
                :data="data"
                @updataSelect="updataSelect"
                @selectCheckedChange="selectCheckedChange"
                >
                </xinpuTableGrid>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import xinpuTableGrid from "@/components/xinpuTableGrid/index.vue";
import {Search} from '@element-plus/icons-vue'
import Sortable from "sortablejs";
import { ref, onMounted } from "vue";
const inputValue = ref('')
const contraTop = ref(null)
const pageNoRef = ref();
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(0);
const tableWidth = ref(0);
const options = ref([[{ code: "myBtn", name: "列调整" }]]);
const saveData = ref([]);
const columns = ref([
  { type: "checkbox", width: 48 },
  { field: "BH", width:'100px', title: "编号", editRender: { name: "input" }},
  { field: "SM", width:'300px', title: "说明", editRender: { name: "input" }},
  {
    field: "yzdx",
    title: "验证对象",
    width: 120,
    disable:true,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          value:'0',
          label:'病历-医嘱'
        }
      ],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "bllx",
    title: "关联病历类型",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          value:'0',
          label:'其他记录'
        }
      ],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "glid",
    title: "关联病历id",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "gllb",
    title: "关联类别",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          value:'0',
          label:'药品'
        },
        {
          value:'1',
          label:'诊疗'
        },
        {
          value:'2',
          label:'材料'
        },
        {
          value:'3',
          label:'抗生素'
        },
      ],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "glz",
    title: "his关联值",
    width: 120
  },
  {
    field: "glz_cl",
    title: "材料关联值",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "glz_kss",
    title: "抗生素关联值",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "glz_yp",
    title: "药品关联值",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "glz_zl",
    title: "诊疗关联值",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  {
    field: "yzlb",
    title: "关联验证类别",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          value:'0',
          label:'允许'
        },
        {
          value:'1',
          label:'不允许'
        },
      ],
      objKey:'value',
      label:'label'
    },
  },
  { field: "glry", width:'120px', title: "关联病历内容", editRender: { name: "input" }},
  {
    field: "ZYLX",
    title: "门诊住院类别",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          value:'0',
          label:'门诊'
        },
        {
          value:'1',
          label:'住院'
        },
      ],
      objKey:'value',
      label:'label'
    },
  },
]);
const rybmArr = ref([]);
const ksArr = ref([])
const data = ref([]);
const gettableHeight = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  let screenheight = document.body.clientHeight;
  let screenWidth = document.body.clientWidth - 248;
  console.log(screenheight, screenWidth);
  screenheight =
    screenheight -
    contraTop.value.offsetHeight - 188;
  tableHeight.value = screenheight;
  tableWidth.value = screenWidth;
  console.log(tableHeight.value, tableWidth.value);
};
const addData = ()=>{
  data.value.push({
    BH: '',
    SM: "",
    ZYLX: '',
    bllx: '',
    glid: '',
    gllb: '',
    glry: "",
    glz: "",
    glz_cl: null,
    glz_kss: null,
    glz_yp: "",
    glz_zl: null,
    saveflag: 1,
    sftysyzt: null,
    yzdx: '',
    yzlb: 0,
    _X_ROW_KEY: ""
  })
}
const deleteClick = async()=>{
  const arr = xinpuGrid.value.removeTable();
  console.log(arr);
  if(arr && arr.length>0){
    let result = []
    arr.forEach(item=>{
      if(item.saveflag == 1){
        data.value.forEach((v,j)=>{
          if(item._X_ROW_KEY == v._X_ROW_KEY){
            data.value.splice(j,1)
          }
        })
      }else{
        item.saveflag = 3
        result.push(item)
      }
    })
    if(result.length>0){
      const res = await window.xinpuHttpApi('100155',{'list':arr})
      if(res && res.Flag){
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        getData()
      }
    }else{
      ElMessage({
          message: '删除成功',
          type: 'success',
      })
    }
  }else{
    ElMessage({
        message: '请选择要删除的数据',
        type: 'warning',
    })
  }
}
// 获取点击的右键菜单的数据
const updataOptions = (data) => {
  console.log(data);
};
const saveClick = async() =>{
  const arr = xinpuGrid.value.getEditData();
  console.log(arr);
  if(arr && arr.length>0){
    arr.forEach(item=>{
      item.sfty = item.sftysyzt
      if(item.saveflag !== 1){
        item.saveflag = '2'
      }
    })
    const res = await window.xinpuHttpApi('100155',{'list':arr})
    console.log(res);
    if(res && res.Flag){
      ElMessage({
          message: '保存成功',
          type: 'success',
      })
    }else{
      ElMessage.error(res.CodeMsg)
    }
  }else{
    ElMessage({
        message: '当前没有要保存的数据',
        type: 'warning',
    })
  }
}
const searchClick = () =>{
  getData()
}
const getData = async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100154',{'rlmc':''})
  console.log(res);
  if(res && res.ReContent){
    res.ReContent.forEach(v=>{
      v.sftysyzt = v.sfty
    })
    data.value = res.ReContent
  }
  console.log(data.value);
  loading.value = false
}
//获取关联病历id
const getrybmData = async() =>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_bl_model"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'glid'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}
//获取材料关联值
const getksData = async() =>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_yp_cl"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'glz_cl'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}
//获取抗生素关联值
const getglz_kssData = async() =>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_yp_kssfl"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'glz_kss'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}
// 获取药品关联值
const getglz_ypData = async() =>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_yp_001"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'glz_yp'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}

// 获取诊疗关联值‘
const getglz_zlData = async() =>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_fy_fyxl"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'glz_zl'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}
// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  console.log(column);
  if(column.column && column.column.field == 'yzdx'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'bllx'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'glid'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'gllb'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'glz_cl'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
    data.value[column.rowIndex].glz = val.value;
  }
  if(column.column && column.column.field == 'glz_kss'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
    data.value[column.rowIndex].glz = val.value;
  }
  if(column.column && column.column.field == 'glz_yp'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
    data.value[column.rowIndex].glz = val.value;
  }
  if(column.column && column.column.field == 'glz_zl'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
    data.value[column.rowIndex].glz = val.value;
  }
  if(column.column && column.column.field == 'yzlb'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'ZYLX'){
    let resultIndex = columns.value[column.columnIndex].field;
    data.value[column.rowIndex][resultIndex] = val.value;
  }
};
// 获取下拉框里选中的复选框
const selectCheckedChange = (val, column) => {};
// 这是自定义的列头改变的数据
const updatacolumns = (val) => {
  // console.log(val);
  // columns.value = val
};
onMounted(() => {
  gettableHeight();
  getData()
  getrybmData()
  getksData()
  getglz_kssData()
  getglz_ypData()
  getglz_zlData()
});
</script>

<style lang="scss" scoped>
.divmain{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #F7F7F7;
  .divmain-case{
    width: 100%;
    height: calc(100vh - 99px);
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .divmain-case-top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .divmain-case-top-left{
          display: flex;
          align-items: center;
        }
    }
    .line{
        width: 100%;
        height: 1px;
        background: #EBEBEB;
        margin: 12px 0;
    }
  }
}
.content-box{
    width: 100%;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 4px;
}
.button-case{
    padding: 10px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;
    border-right: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    .button-case-box {
        display: flex;
        align-items: center;
        margin-right: 12px;
    }
}
.vxe-pageNo {
  padding-right: 16px;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  // overflow: hidden;
}
</style>